<template>
  <div class="timetable">
    <table>
      <thead>
        <tr>
          <th>时间</th>
          <th :key="index" v-for="(item, index) in tableData.length">
            {{ "周" + digital2Chinese(item, "week") }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr :key="index" v-for="(lesson, index) in tableData[0].length">
          <td>
            <p>{{ "第" + digital2Chinese(lesson) + "大节" }}</p>
            <p v-if="lesson <= 5" class="period">
              {{ timePeriod[lesson - 1] }}
            </p>
          </td>
          <td :key="courseIndex" v-for="(course, courseIndex) in tableData">
            <span class="course-name">
              {{ tableData[courseIndex][index].courseName }}
            </span>
            <p class="location-name">
              {{ tableData[courseIndex][index].room }}
            </p>
            <p class="class-id">
              {{ tableData[courseIndex][index].classId }}
            </p>
            <p class="class-time">
              {{ tableData[courseIndex][index].classTime }}
            </p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "TimeTableT",
  data() {
    return {
      tableData: [
        [
          {
            courseName: "",
            courseId: "",
            room: "",
            teacherId: "",
            teacherNumber: "",
            teacherName: "",
            className: "",
            hours: "",
            term: "",
            classTime: "",
            classId: "",
            courseStatus: "",
            teacherAbility: ""
          }
        ]
      ],
      timePeriod: [
        "08:20-10:00",
        "10:20-12:00",
        "14:00-15:40",
        "16:00-17:40",
        "19:00-20:40"
      ]
    };
  },
  methods: {
    updateData(data) {
      this.clearTable();
      for (let i = 0; i < data.length; i++) {
        this.setLesson(data[i]);
        console.log("fioaefha");
      }
    },
    setLesson(item) {
      const classTime = parseInt(item.classTime);
      const dayOfWeek = (classTime - 1) % 4; // 映射为 0-3
      const lesson = Math.floor((classTime - 1) / 4); // 映射为 0-4

      if (dayOfWeek === 4) {
        // 第五行的前四列课时都设置为 "晚自习"
        this.tableData[lesson][dayOfWeek] = {
          courseName: "晚自习",
          teacherName: "1111",
          room: ""
        };
      } else {
        // 设置课程信息
        this.tableData[lesson][dayOfWeek] = {
          courseName: "课程名称 : " + item.courseName,
          classId: "上课班级 : " + item.classId,
          room: "上课地点 : " + item.room, // 假设您希望使用数据中的 "room" 信息
          classTime: "上课时间 : " + item.classTime
        };
      }
    },

    clearTable() {
      let table = [];
      for (let i = 0; i < 7; i++) {
        let arr = [];
        for (let i2 = 0; i2 < 5; i2++) {
          arr.push({
            ccourseName: "",
            courseId: "",
            room: "",
            teacherId: null,
            teacherNumber: null,
            teacherName: "",
            className: null,
            hours: null,
            term: null,
            classTime: "",
            classId: "",
            courseStatus: "",
            teacherAbility: null
          });
        }
        table.push(arr);
      }
      this.tableData = table;
    },

    digital2Chinese(num, identifier) {
      const character = ["零", "一", "二", "三", "四", "五", "六"];
      return identifier === "week" && num === 7 ? "日" : character[num];
    }
  },
  created() {
    this.clearTable();
  }
};
</script>

<style lang="scss" scoped>
table {
  table-layout: fixed;
  width: 100%;

  thead {
    background-color: #67a1ff;

    th {
      color: #fff;
      line-height: 27px;
      font-weight: normal;
    }
  }

  tbody {
    background-color: #eaf2ff;

    td {
      line-height: 0;
      color: #677998;
      height: 115px;

      span {
        line-height: 0.9;
      }
    }
    .class-id {
      color: rgb(233, 4, 73);
      font-size: 15px;
    }
    .location-name {
      color: rgb(17, 59, 227);
      font-size: 15px;
    }

    .course-name {
      color: rgb(150, 89, 28);
      font-size: 15px;
      font-weight: 500;
    }
  }

  th,
  td {
    width: 65px;
    padding: 0px 0px;
    font-size: 15px;
    text-align: center;
  }

  tr td:first-child {
    color: #333;

    .period {
      font-size: 15px;
      padding: 9px;
    }
  }
}
</style>
